<template>
  <el-dialog class="nb-check-button" :title="title" :append-to-body="true" :visible.sync="tabVisible">
    <el-checkbox-group class="nb-check-button" v-if="!label" v-model="checked">
      <el-checkbox-button v-for="item in tags" :label="item" :key="item.id">{{item.name}}</el-checkbox-button>
    </el-checkbox-group>
    <el-checkbox-group class="nb-check-button" v-if="label" v-model="checked">
      <el-checkbox-button v-for="item in tags" :label="item.id" :key="item.id">{{item.name}}</el-checkbox-button>
    </el-checkbox-group>
    <div slot="footer">
      <nb-button large type="plain"  @click="tabVisible = false">取消</nb-button>
      <nb-button large  type="primary" @click="confirm">确定</nb-button>
    </div>
  </el-dialog>
</template>

<script>
  import {CheckboxButton} from 'element-ui'
  export default {
    data () {
      return {
        tabVisible: false,
        tags: [],
        checked: [],
        type: '',
        host: 1,
        title: ''
      }
    },
    props: {
      label: Boolean,
      required: Boolean
    },
    components: {
      ElCheckboxButton: CheckboxButton
    },
    methods: {
      show (data, type, host, title) {
        this.host = host || 1
        this.type = type
        this.checked = data || []
        this.title = title || '设置标签'
        this.tabVisible = true
        this.$nextTick(() => {
          this.fetchTag()
        })
      },
      confirm () {
        if (this.required && !this.checked.length) {
          return this.$message.warning('请选择标签哦')
        }
        this.$emit('confirm', this.checked, this.type)
        this.tabVisible = false
      },
      fetchTag () {
        this.$store.dispatch(this.host === 1 ? 'EMP_TAG_LIST' : 'CUSTOMER_TAG_LIST', {param: {}}).then(res => {
          if (res.success) {
            this.tags = res.data.list
            if (!this.label) {
              let arr = []
              this.tags.map(item => {
                this.checked.map(items => {
                  if (item.id === items.id) {
                    arr.push(item)
                  }
                })
              })
              this.checked = arr
            }
          }
        })
      }
    },
    mounted () {
    }
  }
</script>

<style lang="scss">
  .nb-check-button{
  .el-checkbox-button{
    margin: 0 10px 12px;
  .el-checkbox-button__inner{
    border: 1px solid #d8dce5;
    height: 32px;
    line-height: 32px;
    padding: 0 40px;
    border-radius: 32px;
    box-shadow: none;
      }
    }
  }
</style>
